<template>
	<s-layout title="新增商品">
		<view class="s-card">
			<view class="title">
				商品主图
			</view>
			<s-uploader v-model:url="state.info.image" fileMediatype="image" limit="1" mode="grid"
				:imageStyles="{ width: '168rpx', height: '168rpx' }" />
		</view>
		<view class="s-card">
			<view class="title">
				轮播图
			</view>
			<s-uploader v-model:url="state.info.images" fileMediatype="image" limit="9" mode="grid"
				:imageStyles="{ width: '168rpx', height: '168rpx' }" />
		</view>
		<uni-forms ref="form" border label-width="180" :modelValue="state.info" :rules="state.rules">
			<view class="s-card">
				<view class="title">
					基本信息
				</view>
				<uni-forms-item label="商品标题" name="title" required>
					<uni-easyinput v-model="state.info.title" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="副标题" name="subtitle">
					<uni-easyinput v-model="state.info.subtitle" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="商品分类" name="category_ids">
					<uni-data-picker :localdata="state.categoryList" popup-title="请选择商品分类"
						@change="(e)=>{state.info.category_ids}"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="商品排序" name="weigh">
					<uni-easyinput v-model="state.info.weigh" type="number" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="限购类型" name="limit_type">
					<uni-data-checkbox v-model="state.info.limit_type" :localdata="state.limitList"></uni-data-checkbox>
				</uni-forms-item>
				<!-- <uni-forms-item label="商品状态" name="status">
					<uni-data-checkbox v-model="state.info.status" :localdata="state.statusList"></uni-data-checkbox>
				</uni-forms-item> -->
			</view>
			<view class="s-card">
				<view class="title">
					商品信息
				</view>
				<uni-forms-item label="商品状态" name="status">
					<!-- <uni-data-checkbox v-model="state.info.status" :localdata="state.statusList"></uni-data-checkbox> -->
					<uni-data-select v-model="state.info.status" :localdata="state.statusList"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="单品包邮" name="single_post">
					<uni-data-checkbox v-model="state.info.single_post" :localdata="state.singlePosDict"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="是否为现货" name="isxh">
					<uni-data-select v-model="state.info.isxh" type="text"
						:localdata="state.goodsType"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="商品规格" name="is_sku">
					<uni-data-checkbox v-model="state.info.is_sku" :localdata="state.specList"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="售卖价格" name="price">
					<uni-easyinput v-model="state.info.price" type="digit" placeholder="请输入(元)" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="划线价格" name="original_price">
					<uni-easyinput v-model="state.info.original_price" type="digit" placeholder="请输入(元)"
						:inputBorder="false" :placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="成本价格" name="cost_price">
					<uni-easyinput v-model="state.info.cost_price" type="digit" placeholder="请输入(元)"
						:inputBorder="false" :placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="库存类型" name="stock_show_type">
					<uni-data-checkbox v-model="state.info.stock_show_type"
						:localdata="state.typeList"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="库存预警" name="isStockWarning">
					<switch :checked="state.info.isStockWarning" color="rgb(41, 121, 255)"
						style="transform:scale(0.7)" />
				</uni-forms-item>
				<uni-forms-item label="商品库存" name="stock">
					<uni-easyinput v-model="state.info.stock" type="number" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="销量类型" name="sales_show_type">
					<uni-data-checkbox v-model="state.info.sales_show_type"
						:localdata="state.typeList"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="虚拟销量" name="show_sales">
					<uni-easyinput v-model="state.info.show_sales" type="number" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="商品重量" name="weight">
					<uni-easyinput v-model="state.info.weight" type="number" placeholder="请输入(kg)" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="商品编号" name="sn">
					<uni-easyinput v-model="state.info.sn" type="text" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" />
				</uni-forms-item>
				<uni-forms-item label="配送方式" name="dispatch_type">
					<uni-data-checkbox v-model="state.info.dispatch_type"
						:localdata="state.expressTypeList"></uni-data-checkbox>
				</uni-forms-item>
				<uni-forms-item label="物流快递" name="dispatch_id">
					<uni-data-select v-model="state.info.dispatch_id" :localdata="state.expressList"></uni-data-select>
				</uni-forms-item>
				<uni-forms-item label="货到付款" name="is_offline">
					<switch :checked="state.info.is_offline" color="rgb(41, 121, 255)" style="transform:scale(0.7)" />
				</uni-forms-item>
				<uni-forms-item label="服务保障" name="service_ids">
					<uni-data-select v-model="state.info.service_ids" :localdata="state.goodsService"></uni-data-select>
				</uni-forms-item>
				<!-- <uni-forms-item label="参数详情" name="params">
                	<uni-easyinput v-model="state.info.params" type="textarea" placeholder="请输入" :inputBorder="false"
                		:placeholderStyle="placeholderStyle" />
                </uni-forms-item> -->
				<uni-forms-item label="商品详情" name="content" style="display: flex;align-items: center;">
					<!-- <uni-easyinput v-model="state.info.content"  type="textarea" placeholder="请输入" :inputBorder="false"
						:placeholderStyle="placeholderStyle" /> -->
					<view @click="addGoodsDetail" style="display: flex;align-items: center;padding-top:20rpx ;">+添加商品详情</view>
					<!-- <sp-editor
                    	editorId="editor"
                    	:toolbar-config="toolbarConfig"
                    	@input="inputOver"
                    	@upinImage="upinImage"
                    	@init="initEditor"
                    	@overMax="overMax"
                    	@exportHtml="exportHtml"
                    	@addLink="addLink"
                    ></sp-editor> -->
				</uni-forms-item>
				<view v-if="state.cardSectionList_service.length > 0 ">
					<view class="special-item-panel-list" v-for="(item, index) in state.cardSectionList_service"
						:key="index">
						<view class="special-item-panel-list-video" v-if="item.type == 'video'">
							<video :src="item.content" :poster="item.firstFrame" objectFit="cover" :autoplay="false"
								:page-gesture="true" style="width: 100%;height: 300rpx;"></video>
						</view>
						<view class="special-item-panel-list-image" v-if="item.type == 'img'">
							<image :src="item.content" style="width: 100%;" mode="widthFix"></image>
						</view>
						<view class="special-item-panel-list-text" v-if="item.type == 'text'">
							<!-- <view>{{ item.content }}</view> -->
							<rich-text :nodes="item.content"></rich-text>
						</view>
					</view>
				</view>
				
			</view>
		</uni-forms>
		<su-fixed bottom placeholder bg="bg-white">
			<view class="foot_box ss-flex ss-col-center ss-row-around">
				<button class="ss-reset-button cancel-btn" @tap="">取消</button>
				<button class="ss-reset-button sub-btn" @tap="addGoods">添加</button>
			</view>
		</su-fixed>
	</s-layout>
</template>

<script setup>
	import {
		reactive
	} from 'vue';
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import sheep from '@/sheep';

	const placeholderStyle = 'color:#BBBBBB;font-size:28rpx;line-height:normal';

	const state = reactive({
		info: {
			type: "normal",
			image: "",
			images: [],
			title: "",
			subtitle: "",
			category_ids: [],
			weigh: 0,
			limit_type: 0,
			is_sku: 0,
			status: 0,
			isxh: 0,
			single_post:0,
			price: "",
			original_price: "",
			cost_price: "",
			isStockWarning: false,
			stock_show_type: 0,
			stock: "",
			sales_show_type: 0,
			show_sales: "",
			weight: "",
			sn: "",
			expressType: 0,
			dispatch_id: "",
			dispatch_type: 0,
			service_ids: "",
			is_offline: false,
			// params: "",
			content: "",
		},
		rules: {},
		categoryList: [],
		specList: [{
			text: '单规格',
			value: 0
		}, {
			text: '多规格',
			value: 1
		}],
		singlePosDict:[
			{text: '是',value:1},
			{text: '否',value:0}
		],
		limitList: [{
			text: '不限购',
			value: 0
		}, {
			text: '每日',
			value: 1
		}, {
			text: '累计',
			value: 2
		}],
		statusList: [{
			text: '上架',
			value: 0
		}, {
			text: '隐藏',
			value: 1
		}, {
			text: '下架',
			value: 2
		}],
		typeList: [{
			text: '精确显示',
			value: 0
		}, {
			text: '粗略显示',
			value: 1
		}],
		expressTypeList: [{
			text: '物流快递',
			value: 0
		}],
		goodsType: [],
		expressList: [],
		goodsService: [],
		cardSectionList_service:[]
	})

	onLoad((options) => {
		console.log(options,'250+++');
		if(options && options.id){
			goodsDetail(options.id)
		}
		// if (options && options.productInfo) {
		// 	console.log(isValidJSON(options.productInfo),'是否是json字符串')
		// 	state.info = JSON.parse(options.productInfo)
		// 	// if(state.info.content){
		// 	// 	state.cardSectionList_service= JSON.parse(state.info.content)
		// 	// }else{
		// 	// 	state.cardSectionList_service = []
		// 	// }
		// 	goodsDetail(state.info.id)
		// }
		// console.log(state.info, '231');
		getCategory()
		goodsConfig()
	});
	function isValidJSON(text) {
	  try {
	    JSON.parse(text);
	    return true;
	  } catch (error) {
	    return false;
	  }
	}
	function structrueContent(params, customIndex) {
		console.log(JSON.parse(JSON.stringify(params)), 'params')
		state.cardSectionList_service = JSON.parse(JSON.stringify(params)).contentList;
		uni.$off('richTextSave')
	}
	async function getCategory() {
		const res = await sheep.$api.material.getCategory({
			id: 32
		});
		console.log('resres', res.data)
		const itemData = res.data.children
		const newData = itemData.map((item) => {
			return {
				value: item.id,
				text: item.name
			}
		})
		state.categoryList = [{
			value: res.data.id,
			text: res.data.name,
			children: newData
		}]
	}

	async function goodsConfig() {
		const res = await sheep.$api.material.goodsConfig();
		console.log('resres', res)
		state.goodsType = res.data.goods_type.map((item) => {
			return {
				value: item.id,
				text: item.name
			}
		})
		state.expressList = res.data.shopro_dispatch.map((item) => {
			return {
				value: item.id,
				text: item.name
			}
		})
		state.goodsService = res.data.goods_service.map((item) => {
			return {
				value: item.id,
				text: item.name
			}
		})
	}
	/**
	 * @编辑查询商品信息
	 */
	async function goodsDetail(id) {
		const res = await sheep.$api.material.goodsDetail({
			id: id
		});
		state.info = res.data
		console.log(state.info, '商品详情')
	}
	/**
	 * @修改商品详情介绍
	 */
	function addGoodsDetail() {
		uni.$once('richTextSave', params => {
			structrueContent(params);
		});
		sheep.$router.go('/manage/pages/goods/addGoodsDetail?coustomData=' + JSON.stringify(state.cardSectionList_service))
	}
	/**
	 * @商品新增编辑
	 * @id
	 */
	async function addGoods() {
		// state.info.images = state.info.images.toString()
		state.info.is_offline = state.info.is_offline ? 1 : 0
		state.info.isStockWarning = state.info.is_offline ? 1 : 0
		let paramsData = JSON.parse(JSON.stringify(state.info))
		console.log('paramsData', paramsData)
		if (!paramsData.price || paramsData.price == '') {
			uni.showToast({
				title: '请输入商品售卖价格!',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!paramsData.original_price || paramsData.original_price == '') {
			uni.showToast({
				title: '请输入商品划线价格!',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!paramsData.cost_price || paramsData.cost_price == '') {
			uni.showToast({
				title: '请输入商品成本价格!',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!paramsData.title || paramsData.title == '') {
			uni.showToast({
				title: '请输入商品标题!',
				icon: 'none',
				duration: 2000
			})
			return
		}
		// if (!paramsData.subtitle || paramsData.subtitle == '') {
		// 	uni.showToast({
		// 		title: '请输入商品副标题!',
		// 		icon: 'none',
		// 		duration: 2000
		// 	})
		// 	return
		// }
		if (!paramsData.image || paramsData.image == '') {
			uni.showToast({
				title: '请上传商品主图！',
				icon: 'none',
				duration: 2000
			})
			return
		}
		if (!paramsData.images || paramsData.images == '') {
			uni.showToast({
				title: '请上传商品轮播图！',
				icon: 'none',
				duration: 2000
			})
			return
		}
		//商品状态默认上架
		paramsData.status = 'up'
		//物流配送
		paramsData.dispatch_type = 'express'
		paramsData.content = JSON.stringify(state.cardSectionList_service)
		console.log(paramsData.id, '340');
		if (paramsData.id && paramsData.id != '') {
			const res = await sheep.$api.material.editGoods(paramsData);
			if (res.code != 1) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				})
				return
			}
			showToastFun('商品修改成功!')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1500)
		} else {
			const res = await sheep.$api.material.addGoods(paramsData);
			if (res.code != 1) {
				uni.showToast({
					title: res.msg,
					icon: 'none',
					duration: 2000
				})
				return
			}
			showToastFun('商品添加成功!')
			setTimeout(() => {
				uni.navigateBack({
					delta: 1
				})
			}, 1500)
		}
	}

	function changeStatus(e) {
		console.log('eee', e)
	}

	function showToastFun(title) {
		uni.showToast({
			title: title ? title : '',
			icon: 'none',
			duration: 2000
		})
	}
</script>

<style lang="scss" scoped>
	.s-card {
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 28rpx;
		padding: 28rpx;

		.title {
			position: relative;
			font-weight: 500;
			font-size: 30rpx;
			color: #333333;
			padding-left: 20rpx;
			margin-bottom: 20rpx;

			&::before {
				position: absolute;
				top: 50%;
				left: 0;
				transform: translateY(-50%);
				content: "";
				width: 8rpx;
				height: 32rpx;
				background: #3A43FF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
			}
		}

		.input-value-border {
			border: none;
			padding: 0;
		}

		.placeholder {
			color: #BBBBBB;
			font-size: 28rpx;
		}
	}

	.foot_box {
		height: 110rpx;

		button {
			border-radius: 36rpx;
			width: 45%;
		}

		.cancel-btn {
			background: rgba(103, 128, 255, 0.1);
			color: #3A43FF;
		}

		.sub-btn {
			background: linear-gradient(90deg, #6780FF 0%, #3A43FF 100%);
			color: #fff;
		}
	}
</style>